<template>
  <el-container class="page-main">
    <!-- 1页面左侧导航菜单 -->
    <el-aside class="main-sider">
      <el-menu router unique-opened
               :collapse="siderState.collapsed" class="main-nav-menu"
                @select="handleSelect">
        <el-menu-item index="/salary/a">
          <el-icon :class="siderState.collapseIcon" />
          <template #title> 职级工资标准设置</template>
        </el-menu-item>
        <el-menu-item index="/salary/b">
          <el-icon class="el-icon-menu"/>
          <template #title> 员工工资职级设置</template>
        </el-menu-item>
        <!--<menu-tree :menuTreeData="menuData"></menu-tree>-->
        <el-menu-item index="/salary/c">
          <el-icon class="el-icon-menu"/>
          <template #title> 划考勤</template>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!-- 2页面主要显示内容 -->
    <!--<RouterView />-->
    <el-main class="main-content">
      <div class="content-header">
        <div>Salary:工具栏</div>
      </div>
      <div class="content-body" ref="contentBodyHeight">
        <div class="module-welcome" v-show="showWelcome">
          <h3>Salary:欢迎Div</h3>
        </div>
        <router-view />
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';

export default defineComponent({
  name: 'HomeHr',
  components: {
    // MenuTree
  },
  setup (props, context) {
    // 1. 定义需要的数据
    // 1.1 asider的状态相关变量
    const siderState = ref({
      collapsed: false,
      collapseIcon: 'el-icon-expand',
      miniWidth: 40,
      width: 256
    });
    // 1.2 控制主页面显示Welcome还是显示业务内容
    const showWelcome = ref(true);

    // 2. 定义需要的方法
    const handleSelect = (path: any, key: any) => {
      console.log('HomeSalary >>> click on asider menu：', path, key);
      showWelcome.value = false;
    };
    // 3. 页面挂载初始化
    onMounted(() => {
      //
    });
    // 4. 返回需要暴露给页面使用的数据和方法
    return {
      siderState,
      showWelcome,
      handleSelect
    };
  }
});
</script>
